@require 'settings/breakpoints.styl'

/* Cozy-UI Layout adds a ::before with an height of 3rem
(https://github.com/cozy/cozy-ui/blob/master/stylus/objects/layouts.styl#L105)
on medium-screen to give to the bar the needed place. Since we hide the cozy-bar
on the editor-view we remove this margin
*/
$COZY_BAR_HEIGHT=-3rem
.note-article
    display flex
    flex-direction column
    height 100%

    +medium-screen()
        margin-top $COZY_BAR_HEIGHT

.banner
    & > :first-child
        margin calc(-1 * var(--documentTopPadding)) calc(-1 * var(--documentPadding)) var(--documentTopPadding) calc(-1 * var(--documentPadding))
        position relative
        z-index 5
        border-top 1px solid var(--silver)

.title
    flex-grow 1
    align-items center
    margin 0 2rem calc(2 * var(--note-block-spacing)) 2rem
    text-align center
    font-size var(--note-title0-fs)
    color var(--charcoal-grey)
    line-height var(--note-title0-lh)
    font-weight 900
    font-family var(--primaryFont)
    border none !important
    padding-top 0 !important


.titleInput
    &, &:focus, &:hover, &::placeholder
        border none
        width 100%
        padding 0
        margin 0
        overflow visible
        text-align center
        font-size var(--note-title0-fs)
        line-height var(--note-title0-lh)
        font-weight 900
        font-family Lato-Black, var(--primaryFont)
        vertical-align bottom
        resize none
        min-height min-content
    & ::placeholder
        color var(--coolGrey)
    &, &:focus, &:hover
        color var(--charcoalGrey)
